<template>
	<view class="duty-detail-container">
		<view class="detail-card">
			<view class="card-title">值班详情</view>

			<!-- 会议室名称 -->
			<view class="form-item">
				<view class="form-label">会议室名称</view>
				<view class="form-content">
					<u-input v-model="dutyInfo.roomName" disabled placeholder="暂无会议室名称" :border="false" />
				</view>
			</view>

			<!-- 值班人员 -->
			<view class="form-item">
				<view class="form-label">值班人员</view>
				<view class="form-content">
					<u-input v-model="dutyInfo.nickName" disabled placeholder="暂无值班人员" :border="false" />
				</view>
			</view>

			<!-- 值班周期 -->
			<view class="form-item">
				<view class="form-label">值班周期</view>
				<view class="form-content weeks-content">
					<u-checkbox-group @change="weeksChange">
						<u-checkbox v-model="item.checked" v-for="(item, index) in checkboxList" :key="index"
							:name="item.value">
							{{ item.label }}
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>

			<!-- 描述 -->
			<view class="form-item">
				<view class="form-label">描述</view>
				<view class="form-content">
					<u-input v-model="dutyInfo.description" :height="100" maxlength="200" placeholder="请输入值班描述"
						:border="false" />
				</view>
			</view>

			<!-- 按钮区域 -->
			<view class="button-group">
				<u-button type="primary" @click="saveDuty">保存</u-button>
				<u-button type="default" @click="goBack" :customStyle="{marginTop: '15px'}">返回</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dutyId: '',
				dutyInfo: {
					roomName: '',
					nickName: '',
					description: '',
					weeks: []
				},
				selectedWeeks: [],
				weekDays: [{
						label: '周一',
						value: '1',
					},
					{
						label: '周二',
						value: '2'
					},
					{
						label: '周三',
						value: '3'
					},
					{
						label: '周四',
						value: '4'
					},
					{
						label: '周五',
						value: '5'
					},
					{
						label: '周六',
						value: '6'
					},
					{
						label: '周日',
						value: '0'
					}
				],
				checkboxList:[]
			}
		},
		onLoad(options) {
			if (options.id) {
				this.dutyId = options.id;
				this.getDutyInfo();
			} else {
				this.$refs.uToast.show({
					title: '未获取到值班信息',
					type: 'error'
				});
				setTimeout(() => {
					this.goBack();
				}, 1500);
			}
		},
		methods: {
			getDutyInfo() {
				uni.showLoading({
					title: '加载中...'
				});

				this.$u.api.getDutyDetail({
					id: this.dutyId
				}).then(res => {
					uni.hideLoading();
					if (res.data) {
						this.dutyInfo = res.data;
						// 解析周期数据
						this.selectedWeeks = this.parseWeeks(res.data.weeks);
						this.checkboxList = this.weekDays.map(day => ({
						        label: day.label,
						        value: day.value,
						        checked: res.data.weeks.includes(parseInt(day.value))
						      }));
						console.log(this.selectedWeeks)
					}
				}).catch(err => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: err || '获取值班信息失败',
						type: 'error'
					});
				});
			},
			parseWeeks(weeks) {
				// 解析后端返回的weeks字段
				if (!weeks) return [];

				try {
					// 如果是字符串格式的数组，先转成数组
					if (typeof weeks === 'string') {
						weeks = JSON.parse(weeks);
					}

					// 确保是数组并转换为字符串
					if (Array.isArray(weeks)) {
						return weeks.map(day => String(day));
					}

					return [];
				} catch (e) {
					console.error('解析值班周期出错:', e);
					return [];
				}
			},
			weeksChange(e) {
				this.selectedWeeks = e;
			},
			saveDuty() {
				if (!this.dutyInfo.roomName) {
					this.$refs.uToast.show({
						title: '请输入会议室名称',
						type: 'warning'
					});
					return;
				}

				if (!this.dutyInfo.nickName) {
					this.$refs.uToast.show({
						title: '请输入值班人员',
						type: 'warning'
					});
					return;
				}

				if (this.selectedWeeks.length === 0) {
					this.$refs.uToast.show({
						title: '请选择值班周期',
						type: 'warning'
					});
					return;
				}

				uni.showLoading({
					title: '保存中...'
				});

				// 更新weeks字段
				const params = {
					...this.dutyInfo,
					id: this.dutyId,
					weeks: this.selectedWeeks
				};

				this.$u.api.updateDuty(params).then(res => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: '保存成功',
						type: 'success'
					});
					setTimeout(() => {
						this.goBack();
					}, 1500);
				}).catch(err => {
					uni.hideLoading();
					this.$refs.uToast.show({
						title: err || '保存失败',
						type: 'error'
					});
				});
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
		padding: 15px;
	}

	.duty-detail-container {
		width: 100%;
	}

	.detail-card {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}

	.card-title {
		font-size: 20px;
		font-weight: bold;
		color: #333;
		text-align: center;
		margin-bottom: 25px;
		position: relative;
	}

	.card-title::after {
		content: '';
		position: absolute;
		bottom: -8px;
		left: 50%;
		transform: translateX(-50%);
		width: 60px;
		height: 3px;
		background-color: #d28e29;
		border-radius: 3px;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.form-label {
		font-size: 16px;
		color: #333;
		margin-bottom: 8px;
		font-weight: 500;
	}

	.form-content {
		background-color: #f9f9f9;
		border-radius: 6px;
		padding: 5px 10px;
	}

	.weeks-content {
		padding: 15px 10px;
	}

	.button-group {
		margin-top: 30px;
		padding: 0 20px;
	}
</style>
